<template>
  <div class="view-container">
    <header class="form-container">
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-input v-model.trim="form.title" placeholder="标题" />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="form.pubDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.department" placeholder="所在部门">
            <el-option
              v-for="dept in departmentList"
              :key="dept.id"
              :label="dept.value"
              :value="dept.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-search" @click="searchForm">搜索</el-button>
          <el-button type="default" icon="el-icon-refresh-left" @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="tool">
        <el-button type="success" @click="toAddPage">添加</el-button>
        <el-button type="default" @click="multipleDelete">删除选中</el-button>
      </div>

    </header>

    <section>
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" />
        <el-table-column prop="title" label="标题" width="600" />
        <el-table-column prop="type" label="类别" width="80" align="center" />
        <el-table-column prop="pubUser" label="发布人" align="center" />
        <el-table-column prop="department" label="所在部门" align="center" />
        <el-table-column prop="pubDate" label="发布时间" align="center" />
        <el-table-column prop="id" label="操作" align="center">
          <template slot-scope="scope">
            <i class="el-icon-edit" @click="edit(scope.row.id)" />
            <i class="el-icon-delete" @click="delete(scope.row.id)" />
            <!--<span>{{scope.row.id}}</span>-->
          </template>
        </el-table-column>
      </el-table>
    </section>
    <footer>
      <el-pagination
        background
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
      />
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Publish',
  data() {
    return {
      tableData: [],
      page: {
        index: 1,
        size: 10,
        total: 0
      },
      form: {
        title: '',
        pubDate: [],
        department: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      departmentList: [
        { id: 1, value: '综合部' },
        { id: 2, value: '财务部' },
        { id: 3, value: '风控部' }
      ],
      multipleSelected: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.tableData = [
        { id: 1, title: '大师傅似的', type: '文化', pubUser: 'dsf', department: 'dsfs', pubDate: '2020' },
        { id: 1, title: '大师傅似的', type: '文化', pubUser: 'dsf', department: 'dsfs', pubDate: '2020' },
        { id: 1, title: '大师傅似的', type: '宣传', pubUser: 'dsf', department: 'dsfs', pubDate: '2020' },
        { id: 1, title: '大师傅似的', type: '宣传', pubUser: 'dsf', department: 'dsfs', pubDate: '2020' }
      ]
    },
    searchForm() {
      console.log(this.form.pubDate)
    },
    resetForm(form) {
      this.$refs[form].resetFields()
      this.fetchData()
    },
    edit(id) {

    },
    delete(id) {

    },
    handleSelectionChange(arr) {
      this.multipleSelected = []
      for (const val of arr) {
        this.multipleSelected.push(val.id)
      }
      // console.log(this.multipleSelected)
    },
    toAddPage() {

    },
    multipleDelete() {
      // 删除

      // 刷新
      this.fetchData()
    }
  }

}
</script>

<style lang="scss">
  section {

  }
</style>
<style scoped lang="scss">

</style>
